<template>
    <scale-screen
        :width="screenWidth"
        :height="screenHeight"
        :delay="100"
        :fullScreen="false"
        :boxStyle="{
            background: '#03050C',
            overflow: isScale ? 'hidden' : 'auto',
        }"
        :wrapperStyle="wrapperStyle"
        :autoScale="isScale"
        @resetMapScale="resetMapScale"
  >
        
        <div class="content_wrap" >
            <Header />
            <!-- <IconList /> -->
            <InfoLayer ref="infoLayerRef"/>
            <!-- 左边echarts视图 -->
            <Left />
            <!-- 中间地图 -->
            <div id="map_container" :style="{width: `${screenWidth}px`,height: `${screenHeight}px`}" ref="mapRef"></div>
            <!-- 右边echarts视图 -->
            <Right />
            <!-- <Loading /> -->
        </div>
    </scale-screen>
</template>

<script setup>

import ScaleScreen from "@/components/scale-screen/index.vue";
import Header from '@/components/Top.vue'
import Left from "@/components/Left.vue";
import Right from "@/components/Right/index.vue";
import InfoLayer from "@/components/InfoLayer.vue"
import { userMapStore } from '@/stores/map_new.js'
// 获取当前实例
const isScale = ref(true)
const wrapperStyle = ref()
const screenWidth = ref(2560)
const screenHeight = ref(1440)
const { proxy } = getCurrentInstance()
proxy.$showLoading()
//  const data = reactive({
//    AK:'rgXelQmqlWfjRVV4T7LtS6ghLuBVvSYN',
//  })
//  const { AK } = toRefs(data);
const infoLayerRef = ref()
const mapStore = userMapStore()
const mapRef = ref()
const resetMapScale = (scaleText)=> {
    console.log(scaleText,'scale')
    mapRef.value.style.transform = scaleText;
}
onMounted(() => {
    nextTick(() => {
        mapStore.initMyMap();
        // 地图添加点击事件，点击某点，添加自定义信息弹窗
        // infoLayerRef.value.addCustOverlay()
        proxy.$hideLoading()
    });
 });
</script>
<style scoped lang="scss">
.content_wrap {
    box-sizing: border-box;
    background-image: url("@/assets/img/pageBg.png");
    background-size: cover;
    background-position: center center;
    #map_container {
        // width: 1920px;
        // height:1080px;
        // transform: none !important;
    }
        
    .cust-layer {
        background-color: #263352;
        color: #47ffff;
        padding: 2px;
        width: 230px;
        height: 160px;
        font-size: 12px;
        border-radius: 5px;
        white-space: nowrap;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid #0c88e8;
        box-shadow: 0px 0px 10px #47ffff;
    }
    .title {
        display: block;
        line-height: 16px;
        font-size: 16px;
        font-weight: 700;
    }
    .desc {
        word-wrap: break-word;
        line-height: 16px;
        white-space: normal;
        padding: 10px;
        color: #47ffff;
    }
    .arrow-bottom {
        position:absolute;
        top:159px;
        left:106px;
        width:0;
        height:0;
        border: 1px solid #47ffff;
        border-color:#47ffff transparent transparent transparent;
        border-style:solid;
        border-width:10px;
        overflow: hidden;
        // box-shadow: 0px 0px 10px #47ffff;
    }
  }
</style>
